<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			-webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    -o-box-sizing: border-box;
		    box-sizing: border-box;
		}
		ul{
			/*弹性盒子属性 - start*/
			display: -webkit-flex;
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    align-items: center;
		    align-content: center;
		    /* end */

			width: 400px;
			height: 400px;
		    border-radius: 1%;
		    padding: 1%;
		    text-align: center;
		    border: 1px solid #dfdfdf;
		    background-color: #ddd;
		    margin: 120px auto 0;
		}
		li{
			list-style: none; 
			width: 33.33333333%;
			height: 33.33333333%;
		    padding: 1%;
		}
		li > div{
			/*弹性盒子属性 - start*/
			display: -webkit-flex;
		    display: flex;
		    justify-content: center;
		    flex-wrap: wrap;
		    align-items: center;
		    align-content: center;
		    /* end */
			width: 100%;
			height: 100%;
		    border-radius: 3%;
		    background-color: #fff;
		}
		.btn-wrap{
			margin: 60px auto;
			text-align: center;
		}
		.btn-wrap button{
			width: 100px;
			height: 46px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<ul id="flex-ul">
		<li><div>1</div></li>
	</ul>

	<div class="btn-wrap">
		<button type="button" onclick="addLi()">新加一个白块</button>
		<button type="button" onclick="refresh()">刷新</button>
	</div>

	<script>
		function addLi(){
			var ul = document.getElementById('flex-ul');
			var node = document.getElementsByTagName('li');
			var num = node.length + 1;
			if(num <= 9){
				ul.insertAdjacentHTML('beforeend', '<li><div>'+num+'</div></li>');
			}else{
				alert("不需要再加了哦~~~")
			}
		}
		function refresh(){
			window.location.reload();
		}
	</script>
</body>
</html>